<html>
<head>
    <script src="../../../dojo.js" data-dojo-config="async: true, isDebug: true"></script>
    <title></title>
    <script>
        var query,
             has,
             dom,
             domConstruct,
             iframe;
    </script>
    <meta charset="utf-8" />
</head>
<body>
    <div class="upperclass">
        <h1>Testing dojo/query module.</h1>
        <div id="t" class="lowerclass">
            <h3>h3 <span>span</span> endh3 </h3>
            <!-- comment to throw things off -->
            <div class="foo bar" id="_foo">
                <h3>h3</h3>
                <span id="foo"></span>
                <span></span>
            </div>
            <h3>h3</h3>
            <h3 class="baz foobar" title="thud">h3</h3>
            <span class="fooBar baz foo"></span>
            <span foo="bar"></span>
            <span foo="baz bar thud"></span>
            <!-- FIXME: should foo="bar-baz-thud" match? [foo$=thud] ??? -->
            <span foo="bar-baz-thudish" id="silly:id::with:colons"></span>
            <div id="container">
                <div id="child1" qux="true"></div>
                <div id="child2"></div>
                <div id="child3" qux="true"></div>
            </div>
            <div id="silly~id" qux="true"></div>
            <input id="notbug" name="bug" type="hidden" value="failed">
            <input id="bug" type="hidden" value="passed">
        </div>
        <div id="t2" class="lowerclass">
            <input type="checkbox" name="checkbox1" id="checkbox1" value="foo">
            <input type="checkbox" name="checkbox2" id="checkbox2" value="bar" checked>

            <input type="radio" disabled="true" name="radio" id="radio1" value="thinger">
            <input type="radio" name="radio" id="radio2" value="stuff" checked>
            <input type="radio" name="radio" id="radio3" value="blah">
        </div>
        <select id="t2select" multiple="multiple">
            <option>0</option>
            <option selected="selected">1</option>
            <option selected="selected">2</option>
        </select>

        <iframe id="t3" name="t3" src="./blank.html"></iframe>
        <div id="t4">
            <div id="one" class="subDiv">
                <p class="one subP"><a class="subA">one</a></p>
                <div id="two" class="subDiv">
                    <p class="two subP"><a class="subA">two</a></p>
                </div>
            </div>
        </div>
        <section></section>
        <div id='other'>
            <div id='abc55555'></div>
            <div id='abd55555efg'></div>
            <div id='55555abc'></div>
            <div id='1'></div>
            <div id='2c'></div>
            <div id='3ch'></div>
            <div id='4chr'></div>
            <div id='5char'></div>
            <div id='6chars'></div>
        </div>

        <div id="attrSpecialChars">
            <select name="special">
                <!-- tests for special characters in attribute values (characters that are part of query syntax) -->
                <option value="a+b">1</option>
                <option value="a~b">2</option>
                <option value="a^b">3</option>
                <option value="a,b">4</option>
            </select>

            <!-- tests for quotes in attribute values -->
            <a href="foo=bar">hi</a>
            <!-- tests for brackets in attribute values -->
            <input name="data[foo][bar]">
            <!-- attribute name with a dot, goes down separate code path -->
            <input name="foo[0].bar">
            <input name="test[0]">
        </div>
    </div>
</body>
</html>
